Skip to main content

Web — Examples

Complete working examples for web Aspects. Each example demonstrates a different integration pattern. For background on the categories (context-less vs. context-aware), see the Aspects Overview.

Context-less: Simple Alert​

The simplest possible Aspect — runs with no user context.

alert('Hello World!');

Context-less: Promotional Banner​

Injects a dismissible banner at the top of the page. Demonstrates DOM element creation, inline style injection, and event handling with no platform API dependencies.

(function () {
  'use strict';

  var BANNER_CONFIG = {
    message: 'Welcome! Check out our new savings rates.',
    backgroundColor: '#1a73e8',
    textColor: '#ffffff'
  };

  function injectBanner() {
    var banner = document.createElement('div');
    banner.id = 'promo-banner';
    banner.textContent = BANNER_CONFIG.message;
    banner.style.cssText =
      'background-color:' + BANNER_CONFIG.backgroundColor + ';' +
      'color:' + BANNER_CONFIG.textColor + ';' +
      'text-align:center;padding:12px 20px;' +
      'font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;' +
      'font-size:14px;position:relative;z-index:9999;';

    var closeBtn = document.createElement('button');
    closeBtn.textContent = '\u00d7';
    closeBtn.style.cssText =
      'background:none;border:none;color:' + BANNER_CONFIG.textColor + ';' +
      'font-size:20px;cursor:pointer;position:absolute;' +
      'right:16px;top:50%;transform:translateY(-50%);';
    closeBtn.addEventListener('click', function () {
      banner.remove();
    });
    banner.appendChild(closeBtn);

    document.body.insertBefore(banner, document.body.firstChild);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', injectBanner);
  } else {
    injectBanner();
  }
})();

Context-aware: Personalized Alert (Global Variable)​

Reads the logged-in user's name and GUID from the platform.

var guid = dbk.sessionInfo().userGuid;
var name = dbk.sessionInfo().userFullName;

alert('Hello ' + name + ', your unique identifier is ' + guid);

Context-aware: Personalized Welcome Banner (Global Variable)​

Reads dbk.sessionInfo() to display a greeting banner with the user's name.

(function () {
  'use strict';

  function showWelcome() {
    var name = dbk.sessionInfo().userFullName;

    var banner = document.createElement('div');
    banner.id = 'welcome-banner';
    banner.textContent = 'Welcome back, ' + name + '!';
    banner.style.cssText =
      'background-color:#e8f5e9;color:#2e7d32;' +
      'text-align:center;padding:10px 20px;' +
      'font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;' +
      'font-size:14px;';

    document.body.insertBefore(banner, document.body.firstChild);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', showWelcome);
  } else {
    showWelcome();
  }
})();

Context-aware: OIDC Authentication​

Fetches an authorization code from the Aspects endpoint and stores it for backend exchange.

var CLIENT_ID = 'yourOIDCconsumerIdentifier';
var TOKEN_URL = 'https://online.acmebank.com/feng-bff/beta/v1/aspect/token?clientId=' + CLIENT_ID;

fetch(TOKEN_URL, {
  method: 'GET',
  headers: {
    'correlationId': crypto.randomUUID(),
    'Cookie': document.cookie,
    'Accept': 'application/json'
  }
})
  .then(function (response) {
    if (!response.ok) {
      throw new Error('HTTP status code: ' + response.status);
    }
    return response.json();
  })
  .then(function (data) {
    window.auth_token = data.token;
    // Pass this token to your backend for a secure token exchange
  })
  .catch(function (error) {
    console.error('Error: ' + error.message);
  });

Complete Example: Context-less Chat Widget​

A full working chat bubble widget that runs without any user context. Expand to see the complete code with CSS and JavaScript.

Full context-less chat widget (click to expand)
(function() {
  'use strict';

  var styles = '\
    .chatbot-widget * { margin: 0; padding: 0; box-sizing: border-box; }\
    .chat-bubble { position: fixed; bottom: 25px; right: 25px; width: 60px; height: 60px;\
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%;\
      cursor: pointer; box-shadow: 0 4px 20px rgba(102, 126, 234, 0.5); display: flex;\
      align-items: center; justify-content: center; transition: transform 0.3s, box-shadow 0.3s;\
      z-index: 10000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }\
    .chat-bubble:hover { transform: scale(1.1); box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6); }\
    .chat-bubble-icon { font-size: 28px; transition: transform 0.3s; }\
    .chat-bubble.open .chat-bubble-icon { transform: rotate(180deg); }\
    .chat-container { position: fixed; bottom: 100px; right: 25px; width: 380px; max-height: 550px;\
      background: white; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.2);\
      overflow: hidden; z-index: 9999; opacity: 0; visibility: hidden;\
      transform: translateY(20px) scale(0.95); transition: all 0.3s ease;\
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }\
    .chat-container.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }\
    .chat-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;\
      padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; }\
    .chat-messages { height: 350px; overflow-y: auto; padding: 20px; background: #f8f9fa; }\
    .chat-message { margin-bottom: 15px; display: flex; align-items: flex-end; gap: 8px; }\
    .chat-message.bot .message-content { background: white; color: #333; border-radius: 16px;\
      border-bottom-left-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }\
    .chat-message.user { flex-direction: row-reverse; }\
    .chat-message.user .message-content { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\
      color: white; border-radius: 16px; border-bottom-right-radius: 4px; }\
    .message-content { max-width: 75%; padding: 10px 14px; line-height: 1.4; font-size: 0.9rem; }\
    .chat-input-container { display: flex; padding: 12px 15px; background: white;\
      border-top: 1px solid #eee; gap: 10px; }\
    .chat-input { flex: 1; padding: 10px 16px; border: 2px solid #e9ecef; border-radius: 22px;\
      font-size: 0.9rem; outline: none; font-family: inherit; }\
    .chat-input:focus { border-color: #667eea; }\
    .send-button { width: 40px; height: 40px; border: none;\
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;\
      border-radius: 50%; cursor: pointer; font-size: 16px; }';

  var isOpen = false;
  var hasOpenedOnce = false;

  // Block execution if running inside a WebView (mobile uses a different Aspect)
  function isRunningInWebView() {
    var ua = navigator.userAgent;
    if (ua.includes('Android') && (ua.includes('wv') || ua.includes('WebView'))) {
      return true;
    }
    if ((ua.includes('iPhone') || ua.includes('iPad')) && !ua.includes('Safari')) {
      return true;
    }
    return false;
  }

  if (window.self !== window.top || isRunningInWebView()) {
    throw new Error('Script blocked: not running in top-level web context.');
  }

  function createElement(tag, className, attrs, html) {
    var el = document.createElement(tag);
    if (className) el.className = className;
    if (attrs) { for (var k in attrs) { el.setAttribute(k, attrs[k]); } }
    if (html) el.innerHTML = html;
    return el;
  }

  function escapeHtml(text) {
    var div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }

  function getTime() {
    return new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
  }

  function toggleChat() {
    isOpen = !isOpen;
    var container = document.getElementById('chatContainer');
    var bubble = document.getElementById('chatBubble');
    var icon = document.getElementById('bubbleIcon');

    if (isOpen) {
      container.classList.add('open');
      bubble.classList.add('open');
      icon.textContent = '\u2715';
      if (!hasOpenedOnce) {
        hasOpenedOnce = true;
        setTimeout(function() { addBotMessage("Hello! How can I help you today?"); }, 300);
      }
      setTimeout(function() { document.getElementById('userInput').focus(); }, 300);
    } else {
      container.classList.remove('open');
      bubble.classList.remove('open');
      icon.textContent = '\uD83D\uDCAC';
    }
  }

  function sendMessage() {
    var input = document.getElementById('userInput');
    var message = input.value.trim();
    if (message === '') return;
    addUserMessage(message);
    input.value = '';
    setTimeout(function() {
      addBotMessage("Thanks for your message! This is a sample response.");
    }, 800 + Math.random() * 700);
  }

  function addUserMessage(message) {
    var el = createElement('div', 'chat-message user');
    el.innerHTML = '<div class="message-content">' + escapeHtml(message) + '</div>';
    var msgs = document.getElementById('chatMessages');
    msgs.appendChild(el);
    msgs.scrollTop = msgs.scrollHeight;
  }

  function addBotMessage(message) {
    var el = createElement('div', 'chat-message bot');
    el.innerHTML = '<div class="message-content">' + escapeHtml(message) + '</div>';
    var msgs = document.getElementById('chatMessages');
    msgs.appendChild(el);
    msgs.scrollTop = msgs.scrollHeight;
  }

  function init() {
    var styleEl = document.createElement('style');
    styleEl.textContent = styles;
    document.head.appendChild(styleEl);

    var wrapper = createElement('div', 'chatbot-widget');

    var bubble = createElement('div', 'chat-bubble', { id: 'chatBubble' });
    bubble.appendChild(createElement('span', 'chat-bubble-icon', { id: 'bubbleIcon' }, '\uD83D\uDCAC'));
    bubble.addEventListener('click', toggleChat);
    wrapper.appendChild(bubble);

    var container = createElement('div', 'chat-container', { id: 'chatContainer' });
    var header = createElement('div', 'chat-header', null, '<h3 style="font-size:1rem">ChatBot Assistant</h3>');
    var closeBtn = createElement('button', '', { style: 'background:rgba(255,255,255,0.2);border:none;color:white;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:18px;' }, '\u2715');
    closeBtn.addEventListener('click', toggleChat);
    header.appendChild(closeBtn);
    container.appendChild(header);
    container.appendChild(createElement('div', 'chat-messages', { id: 'chatMessages' }));

    var inputArea = createElement('div', 'chat-input-container');
    var input = createElement('input', 'chat-input', { id: 'userInput', type: 'text', placeholder: 'Type a message...', autocomplete: 'off' });
    input.addEventListener('keypress', function(e) { if (e.key === 'Enter') sendMessage(); });
    var sendBtn = createElement('button', 'send-button', null, '\u27A4');
    sendBtn.addEventListener('click', sendMessage);
    inputArea.appendChild(input);
    inputArea.appendChild(sendBtn);
    container.appendChild(inputArea);

    wrapper.appendChild(container);
    document.body.appendChild(wrapper);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();

Complete Example: Context-aware Chat Widget (Global Variable)​

Same chat widget as above, but greets the user by name using dbk.sessionInfo(). The only change from the context-less version is in the toggleChat function:

Key difference — toggleChat with user greeting (click to expand)
// Block execution if running inside a WebView (mobile uses a different Aspect)
function isRunningInWebView() {
  var ua = navigator.userAgent;
  if (ua.includes('Android') && (ua.includes('wv') || ua.includes('WebView'))) {
    return true;
  }
  if ((ua.includes('iPhone') || ua.includes('iPad')) && !ua.includes('Safari')) {
    return true;
  }
  return false;
}

if (window.self !== window.top || isRunningInWebView()) {
  throw new Error('Script blocked: not running in top-level web context.');
}

function toggleChat() {
  isOpen = !isOpen;
  var container = document.getElementById('chatContainer');
  var bubble = document.getElementById('chatBubble');
  var icon = document.getElementById('bubbleIcon');
  var name = dbk.sessionInfo().userFullName;

  if (isOpen) {
    container.classList.add('open');
    bubble.classList.add('open');
    icon.textContent = '\u2715';
    if (!hasOpenedOnce) {
      hasOpenedOnce = true;
      setTimeout(function() {
        addBotMessage("Hello, " + name + "! How can I help you today?");
      }, 300);
    }
    setTimeout(function() { document.getElementById('userInput').focus(); }, 300);
  } else {
    container.classList.remove('open');
    bubble.classList.remove('open');
    icon.textContent = '\uD83D\uDCAC';
  }
}

Next Steps​